<template>
 <div>
    <!--热门攻略推荐-->
   <div style="margin-top: 50px">
     <h3>攻略推荐</h3>
     <el-card :body-style="{ padding: '0px' }" v-for="article in articleArr"
              style="width: 260px;float: left;margin:15px;height: 280px">
       <a @click="toDetail('/detail?id='+article.id)"><img :src="article.contentImgUrl" class="image" ></a>
       <div style="padding: 14px;">
         <span style="margin: 0">{{ article.title }}</span>
         <div class="bottom clearfix" style="margin: 0">
           <p class="time" style="line-height: 16px">{{article.brief.slice(0,30)}}</p>
         </div>
       </div>
     </el-card>
     <div style="margin: 0 auto;width: 200px">
       <el-button @click="toDetail('/community/all')">查看更多游记攻略</el-button>
     </div>
   </div>
   <!--精选特惠 -->
   <div style="margin: 0 auto;height:300px">
     <h3>精选特惠</h3>
     <el-card :body-style="{ padding: '0px' }" v-for="route in routeArr"
              style="width: 260px;float: left;margin:15px">
       <a @click="toDetail('/route?id='+route.id)"><img :src="route.imgUrl" class="image" ></a>
       <div style="padding: 14px;">
         <span style="margin: 0">{{ route.name }}</span>
         <div class="bottom clearfix" style="margin: 0">
           <p class="time" style="line-height: 16px">{{route.keywords}}</p>
         </div>
       </div>
     </el-card>
     <div style="margin: 0 auto;width: 200px">
       <el-button @click="toDetail('/productlist?type=routes')">查看更多特惠线路</el-button>
     </div>
   </div >
   <!--住酒店-->
   <div style="margin-top: 50px">
     <h3>住酒店</h3>
     <el-card :body-style="{ padding: '0px' }" v-for="hotel in hotelArr"
              style="width: 260px;float: left;margin:15px;height: 280px">
       <a @click="toDetail('/hotel?id='+hotel.id)"><img :src="hotel.imgUrl" class="image" ></a>
       <div style="padding: 14px;">
         <span style="margin: 0">{{ hotel.name }}</span>
         <div class="bottom clearfix" style="margin: 0">
           <p class="time" style="line-height: 16px">{{hotel.address}}</p>
         </div>
       </div>
     </el-card>
     <div style="margin: 0 auto;width: 200px">
       <el-button @click="toDetail('/productlist?type=hotels')">查看更多特色酒店</el-button>
     </div>
   </div>
   <!--热门景点-->
   <div style="margin-top: 50px">
     <h3>热门景点</h3>
     <el-card :body-style="{ padding: '0px' }" v-for="spot in spotArr"
              style="width: 260px;float: left;margin:15px;height: 250px">
       <a @click="toDetail('/spot?id='+spot.id)"><img :src="spot.imgUrl" class="image" ></a>
       <div style="padding: 14px;">
         <span style="margin: 0">{{ spot.name }}</span>
         <div class="bottom clearfix" style="margin: 0">
           <p class="time" style="line-height: 16px">{{spot.location}}</p>
         </div>
       </div>
     </el-card>
     <div style="margin: 0 auto;width: 200px">
       <el-button @click="toDetail('/productlist?type=spots')">查看更多热门景点线路</el-button>
     </div>
   </div>
 </div>

</template>

<script>
export default {
  name: "Hotel",
  data:function (){
    return {
      articleArr:[],
      spotArr:[],
      hotelArr:[],
      routeArr:[],
  }
  },
  methods:{
    toDetail(addr){
      this.$router.push(addr)
    },
    loadRoute(){
      this.axios
          .create({
            'headers':{
              'Authorization': localStorage.getItem('localJwt')
            }
          })
          .get("http://localhost:8080/v1/routes/list?page=1").then((response)=> {
        console.log("请求已发送")
        console.log((response.data.code))
        if (response.data.code === 1){
          this.routeArr = response.data.data.list;
          console.log(this.bannerArr)
        }
      })
    },
    loadHotel(){
      this.axios
          .create({
            'headers':{
              'Authorization': localStorage.getItem('localJwt')
            }
          })
          .get("http://localhost:8080/v1/hotels/").then((response)=> {
        console.log("请求已发送")
        console.log((response.data.code))
        if (response.data.code === 1){
          this.hotelArr = response.data.data;
          console.log(this.hotelArr)
        }
      })
    },
    loadSpot(){
      this.axios
          .create({
            'headers':{
              'Authorization': localStorage.getItem('localJwt')
            }
          })
          .get("http://localhost:8080/v1/spots/listIndex").then((response)=> {
        console.log("请求已发送")
        console.log((response.data.code))
        if (response.data.code === 1){
          this.spotArr = response.data.data;
          console.log(this.hotelArr)
        }
      })
    },
    loadArticle() {
      this.axios
          .create({
            'headers':{
              'Authorization': localStorage.getItem('localJwt')
            }
          })
          .get("http://localhost:8080/v1/contents/list?page=1").then((response)=> {
        console.log("请求已发送")
        console.log((response.data.code))
        if (response.data.code === 1){
          this.articleArr = response.data.data.list;
          console.log(this.contentArr)
        }
      })
    }
  },
  mounted() {
    this.loadRoute();
    this.loadHotel();
    this.loadSpot();
    this.loadArticle();
  }
}
</script>

<style>
.time {
  font-size: 13px;
  color: #999;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>